import React from 'react'
import ReactDOM from 'react-dom'
import 'babel-polyfill'
import App from '@components/app'
import Login from '@components/login'
import './index.css'
import { HashRouter as Router, Route } from 'react-router-dom'
import './utility/extend'
import { ConfigProvider } from 'antd'
import  zhCN  from  'antd/es/locale/zh_CN'

class Index extends React.Component {

  state = {
    logined: null
  }
  
  componentDidMount() {
    // 监听路由变化
    this.detectionLogin(this.props.location)
    let unListen = this.props.history.listen(location => {
      this.detectionLogin(location)
    })
    this.setState({
      unListen
    })
  }

  // 生命周期函数-组件销毁时执行
  componentWillUnmount() {
    let { unListen } = this.state
    unListen && unListen()
  }
  
  // 检测是否已登录，未登录的话跳转去登录
  detectionLogin = (location) => {
    console.log('index组件-监听路由变化', location.pathname)
    let logined = window.localStorage.logined
    if (logined !== '1' && location.pathname !== '/login') {
      this.props.history.replace('/login')
    }
  }

  render() {
    let routeComponent = this.props.location.pathname === '/login' ? Login : App
    return (
      <Route component={ routeComponent }></Route>
    )
  }

}

ReactDOM.render(
  <ConfigProvider locale={ zhCN }>
    <Router>
      <Route component={ Index }>
      </Route>
    </Router>
  </ConfigProvider>,
  document.getElementById('root')
)